
<template>
  <el-container>

    <el-aside width="250px" class="aside-menu">
    <header class="tree-menu-title">产品目录</header>
      <el-tree
        ref="tree"
        node-key="id"
        :highlight-current="true"
        v-loading="dataLoading"
        :is-leaf="true"
        :data="treeData"
        :props="{
        label: 'name',
        children: 'childList'
      }"
        accordion
        @node-click="handleNodeClick">
      </el-tree>
    </el-aside>
    <el-main class="pt0 pr0">
      <Lines />
    </el-main>
  </el-container>

</template>

<script>
  import Lines from './line';
  export default {
    data () {
      return {
        treeData: [],
        treeProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    components: {
      Lines
    },
    created () {
      // TODO: remote load
      // this.treeData = mockTreeData;

      this.getProductCatalog()
    },
    computed: {

    },
    methods: {
      // 获取产品目录树
      getProductCatalog () {
        this.dataLoading = true
        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-prod/queryProductDirList'),
          method: 'post'
        }).then(data => {

          let treeData = data.data || [];
          console.log(treeData)

          let productDirectoryId = this.$route.query.productDirectoryId;

          if(!productDirectoryId) {
            if (treeData.length > 0) {
              productDirectoryId = treeData[0].id
              this.$router.push({ query: { productDirectoryId }})
            }
          }

          setTimeout(() => {
            let id = productDirectoryId
            if (id) {
              let tree = this.$refs.tree
              tree.setCurrentKey(id)
            }

          }, 0);

          console.log(treeData)
          this.treeData = treeData
          this.dataLoading = false
        })
      },
      handleNodeClick (node) {
        let productDirectoryId = node.id
        this.$router.push({ query: { productDirectoryId }})
      },


    }
  }
</script>

<style scoped>
  .aside-menu {
    padding: 15px;
    border-radius: 4px;
    position: relative;
    box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.1);
  }

  .pr0 {
    padding-right: 0;
  }

  .pt0 {
    padding-top: 0;
  }

  .mt30 {
    margin-top: 30px;
  }

  .tree-menu-title {
    font-size: 18px;
    text-align: center;
    line-height: 28px;
    margin-bottom: 15px;
  }
</style>
